JavaScript API

<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>

<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
<script>
  var map = new BMap.Map('container');
</script>

<script>
  window.initMap = function() {
    var map = new BMap.Map('container');
  };
</script>
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥&callback=initMap"></script>

<!-- 引入鼠标绘制工具库 -->
<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!-- 引入热力图库 -->
<script src="https://api.map.baidu.com/library/Heatmap/2.0/src/HeatmapOverlay.js"></script>

// 库加载完成后即可使用 BMapLib 下的工具类
var drawingManager = new BMapLib.DrawingManager(map);
var heatmapOverlay = new BMapLib.HeatmapOverlay();

new BMap.Map(container, opts)

new BMap.Point(lng, lat)

new BMap.Marker(point, opts)

new BMap.Polyline(points, opts)

new BMap.Polygon(points, opts)

new BMap.InfoWindow(content, opts)

var map = new BMap.Map('container', {
  enableMapClick: false,
  minZoom: 3,
  maxZoom: 19
});

map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

// 设置中心点
map.setCenter(new BMap.Point(116.404, 39.915));

// 平移地图
map.panTo(new BMap.Point(116.404, 39.915));
map.panBy(100, 100);

// 缩放地图
map.setZoom(15);
map.zoomIn();
map.zoomOut();

// 设置视野范围
var bounds = new BMap.Bounds(
  new BMap.Point(116.3, 39.9),
  new BMap.Point(116.5, 40.0)
);
map.setBounds(bounds);

// 根据点数组设置视野
var points = [point1, point2, point3];
map.setViewport(points, {
  margins: [50, 50, 50, 50]  // 上右下左边距
});

var marker = new BMap.Marker(point, {
  enableDragging: true,
  raiseOnDrag: true,
  draggingCursor: 'move'
});

marker.enableDragging();
marker.disableDragging();

marker.setPosition(newPoint);
marker.setIcon(icon);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);

var points = [];
for (var i = 0; i < 10000; i++) {
  points.push(new BMap.Point(
    116.404 + Math.random() * 0.1,
    39.915 + Math.random() * 0.1
  ));
}

var pointCollection = new BMap.PointCollection(points, {
  size: BMAP_POINT_SIZE_NORMAL,  // 点大小
  color: '#d340c1'               // 点颜色
});
map.addOverlay(pointCollection);

var markers = [];
for (var i = 0; i < 100; i++) {
  var point = new BMap.Point(116.404 + Math.random(), 39.915 + Math.random());
  markers.push(new BMap.Marker(point));
}

var markerClusterer = new BMapLib.MarkerClusterer(map, {
  markers: markers,
  maxZoom: 15,           // 最大聚合级别
  gridSize: 60,          // 聚合网格大小
  styles: [{             // 自定义样式
    url: 'cluster.png',
    size: new BMap.Size(40, 40)
  }]
});

var polygon = new BMapGL.Polygon(
  [
    new BMapGL.Point(116.387112, 39.920977),
    new BMapGL.Point(116.385243, 39.913063),
    new BMapGL.Point(116.394226, 39.917988)
  ],
  {
    strokeColor: 'blue',
    strokeWeight: 2,
    fillColor: 'red',
    fillOpacity: 0.3
  }
);
map.addOverlay(polygon);

var local = new BMap.LocalSearch(map, {
  renderOptions: {
    map: map,
    panel: 'results'
  },
  onSearchComplete: function(results) {
    console.log('搜索完成');
  }
});

local.search('餐厅');
local.searchNearby('餐厅', point, 1000);
local.searchInBounds('餐厅', map.getBounds());

// 回调在构造 LocalSearch 时通过 onSearchComplete 配置，
// results 为 LocalResult 对象
var local = new BMap.LocalSearch(map, {
  onSearchComplete: function(results) {
    var num = results.getCurrentNumPois();  // 当前页结果数
    var keyword = results.getKeyword();      // 搜索关键词

    for (var i = 0; i < num; i++) {
      var poi = results.getPoi(i);
      console.log('名称：', poi.title);
      console.log('地址：', poi.address);
      console.log('电话：', poi.phoneNumber);
      console.log('坐标：', poi.point);
      console.log('类型：', poi.type);
    }
  }
});

local.search('餐厅');

var driving = new BMap.DrivingRoute(map, {
  renderOptions: {
    map: map,
    panel: 'route',
    autoViewport: true
  },
  policy: BMAP_DRIVING_POLICY_LEAST_TIME,
  onSearchComplete: function(results) {
    var plan = results.getPlan(0);
    console.log('距离：' + plan.getDistance() + '米');
    console.log('时间：' + plan.getDuration() + '秒');
  }
});

driving.search(startPoint, endPoint, {waypoints: [waypoint1, waypoint2]});

var transit = new BMap.TransitRoute(map, {
  renderOptions: {map: map},
  policy: BMAP_TRANSIT_POLICY_LEAST_TIME
});

transit.search(startPoint, endPoint);

var walking = new BMap.WalkingRoute(map, {
  renderOptions: {map: map}
});

walking.search(startPoint, endPoint);

var riding = new BMap.RidingRoute(map, {
  renderOptions: {map: map}
});

riding.search(startPoint, endPoint);

var geocoder = new BMap.Geocoder();

geocoder.getPoint('北京市海淀区上地十街10号', function(point) {
  if (point) {
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));
  }
}, '北京市');

geocoder.getLocation(point, function(result) {
  if (result) {
    console.log('地址：' + result.address);
    console.log('省份：' + result.addressComponents.province);
    console.log('城市：' + result.addressComponents.city);
    console.log('区县：' + result.addressComponents.district);
    console.log('街道：' + result.addressComponents.street);
    console.log('门牌号：' + result.addressComponents.streetNumber);
    
    // 周边POI
    if (result.surroundingPois) {
      result.surroundingPois.forEach(function(poi) {
        console.log('周边：', poi.title, poi.address);
      });
    }
  }
});

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(result) {
  if (this.getStatus() === BMAP_STATUS_SUCCESS) {
    var point = result.point;
    map.centerAndZoom(point, 15);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    
    console.log('定位精度：', result.accuracy);
    console.log('地址：', result.address);
  } else {
    console.log('定位失败：', this.getStatus());
  }
}, {
  enableHighAccuracy: true,  // 高精度定位
  timeout: 10000             // 超时时间
});

var listener = map.addEventListener('click', function(e) {
  console.log(e.point);
});

map.removeEventListener('click', listener);

map.addEventListener('click', function(e) {
  console.log('经度：' + e.point.lng);
  console.log('纬度：' + e.point.lat);
  console.log('像素坐标：' + e.pixel.x + ', ' + e.pixel.y);
  console.log('DOM事件：', e.domEvent);
});

var overlay = new BMap.Overlay();

overlay.addEventListener('customEvent', function(e) {
  console.log('自定义事件触发', e.data);
});

overlay.dispatchEvent(new BMap.Event('customEvent', {data: 'test'}));

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);

// 设置倾斜和旋转
map.setHeading(45);   // 旋转角度
map.setTilt(60);      // 倾斜角度

// 启用交互
map.enableRotate(true);
map.enableTilt(true);

// 3D棱柱
var prism = new BMapGL.Prism([
  new BMapGL.Point(116.387112, 39.920977),
  new BMapGL.Point(116.385243, 39.913063),
  new BMapGL.Point(116.394226, 39.917988)
], 5000, {  // 高度5000米
  topFillColor: '#5679ea',
  topFillOpacity: 0.5,
  sideFillColor: '#5679ea',
  sideFillOpacity: 0.9
});
map.addOverlay(prism);

// 3D标签
var label = new BMapGL.Label3D('百度大厦', new BMapGL.Point(116.404, 39.915), {
  fontSize: 20,
  fontColor: '#333',
  backgroundColor: '#fff',
  padding: 10
});
map.addOverlay(label);

var heatmapOverlay = new BMapLib.HeatmapOverlay({
  radius: 20,
  opacity: 0.8
});
map.addOverlay(heatmapOverlay);

heatmapOverlay.setDataSet({
  data: [
    {lng: 116.418261, lat: 39.921984, count: 50},
    {lng: 116.423332, lat: 39.916532, count: 51}
  ],
  max: 100
});

// 显示/隐藏热力图
heatmapOverlay.show();
heatmapOverlay.hide();

// 安装类型定义
// npm install @types/bmap --save-dev

// 在ts文件中使用
/// <reference path="node_modules/@types/bmap/index.d.ts" />

// 或者配置tsconfig.json
{
  "compilerOptions": {
    "types": ["bmap"]
  }
}

// 定义地图类型
interface MapOptions {
  enableMapClick?: boolean;
  minZoom?: number;
  maxZoom?: number;
}

// 创建地图实例
const map = new BMap.Map('container', {
  enableMapClick: false,
  minZoom: 3,
  maxZoom: 19
} as MapOptions);

// 类型安全的标注创建
const point = new BMap.Point(116.404, 39.915);
const marker = new BMap.Marker(point, {
  enableDragging: true
});

// 类型安全的事件处理
map.addEventListener('click', (e: { point: BMap.Point; pixel: BMap.Pixel }) => {
  console.log(`点击位置：${e.point.lng}, ${e.point.lat}`);
});

// 类型安全的服务调用
const local = new BMap.LocalSearch(map, {
  onSearchComplete: (results: BMap.LocalResult) => {
    const num = results.getCurrentNumPois();
    for (let i = 0; i < num; i++) {
      const poi = results.getPoi(i);
      console.log(poi?.title);
    }
  }
});

// baidu-map.ts
declare const BMap: any;

export interface BMapOptions {
  ak: string;
  container: string | HTMLElement;
  center?: { lng: number; lat: number };
  zoom?: number;
}

export class BaiduMap {
  private map: any;
  private ak: string;

  constructor(options: BMapOptions) {
    this.ak = options.ak;
    this.initMap(options);
  }

  private initMap(options: BMapOptions): void {
    const container = typeof options.container === 'string'
      ? document.getElementById(options.container)
      : options.container;

    this.map = new BMap.Map(container);
    
    const center = options.center || { lng: 116.404, lat: 39.915 };
    const zoom = options.zoom || 15;
    
    this.map.centerAndZoom(
      new BMap.Point(center.lng, center.lat),
      zoom
    );
  }

  addMarker(lng: number, lat: number, options?: any): any {
    const point = new BMap.Point(lng, lat);
    const marker = new BMap.Marker(point, options);
    this.map.addOverlay(marker);
    return marker;
  }

  setCenter(lng: number, lat: number): void {
    this.map.setCenter(new BMap.Point(lng, lat));
  }

  on(event: string, handler: Function): void {
    this.map.addEventListener(event, handler);
  }
}

<script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

var drawingManager = new BMapLib.DrawingManager(map, {
  isOpen: true,
  drawingToolOptions: {
    anchor: BMAP_ANCHOR_TOP_RIGHT
  }
});

map.disableDragging();
for (var i = 0; i < markers.length; i++) {
  map.addOverlay(markers[i]);
}
map.enableDragging();

var timer = null;
map.addEventListener('moveend', function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log('地图移动完成');
  }, 300);
});

// 销毁地图前清理
function destroyMap() {
  // 清除所有覆盖物
  map.clearOverlays();
  
  // 移除所有控件
  map.getControls().forEach(function(control) {
    map.removeControl(control);
  });
  
  // 移除事件监听
  // ...
  
  map = null;
}